<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Docoment</title>
</head>
<body>
    <p>段落标签</p><strong>对文字有加粗的效果</strong><p>段落</p>
    镜面嵌套关系
    不推荐下面这样交差嵌套方式，嵌套错乱
    <p>段<strong>落</p></strong>
    ========================<br />   <!--br标签换行--> 注释快捷键：ctrl+/
    元素/标签：
         标签名称：不区分大小写
         成对出现的：开始标签 内容 结束标签
         单标签：空元素 <meta> <br> <br/> <img/>
         属性：开始标签中书写，由属性名称key 
        块级元素：
              p ：实现段落的效果
              div*:宽度100%，可以嵌套
              主要用于结构的布局
              独立占用一整行，宽度100%，高度由内容决定
        行内元素：
            span：主要给CSS使用，无任何效果 “a”引用超链接  <img/>引用图片
            作用：主要用于内容的填充
            和其他行内元素共享同一行，宽度、高度都是由内容决定的
        嵌套关系;
            块级可以嵌套行内元素
            不推荐行内嵌套块级
            行内元素可以嵌套行内元素
            块级元素视情况嵌套块级元素
    <br>
    hello word
    <p>段落，这是块级元素</p>
    <span>行内元素</span><span>主要给CSS使用</span><strong>加粗，很多文字</strong>
    <p>段落<span>块级嵌套行内，最好不要行内嵌套块级</span>段落</p>
    <span>行内<p>不推荐嵌套行内</p>元素</span>
    <span>这是行内<strong>元</strong>素</span>
    <p>段落<p>段落</p><p>段落</p></p>
    <div>容器1<div>容器2</div>容器1结束</div>
</html>